<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<title></title>
	</head>

	<body>
		<canvas id="myCanvas" width="1300" height="650"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
						var arcArr=[
//						[20,100,10,5,5,"red"],
//						[20,100,10,10,0,"blue"],
//						[20,100,10,10,5,"blue"]
						];
			setInterval(function() {
				for(var i = 0; i < 60; i++) {
					var vx = Math.random() * 5 + 2;
					if(Math.random() >0.5) {
						vx = -vx;

					}
					var vy = Math.random() * 15 +20;
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);

					arcArr.push([700, 500, 10, vx,-vy, "rgb(" + r + "," + g + "," + b + ")"]);

				}
				
				

			}, 3000);

			setInterval(function() {
				ctx.fillStyle = "rgba(160,200,0,0.3)";
				ctx.fillRect(0, 0, 1300, 650);
				for(var i = 0; i < arcArr.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = arcArr[i][5];
					//				var arcX=arcArr[0][0];
					//				var arcY=arcArr[0][1];
					//				var arcr=arcArr[0][2];
					//				var arcVX=arcArr[0][3];
					//				var arcVY=arcArr[0][4];
					ctx.arc(arcArr[i][0], arcArr[i][1], arcArr[i][2], 0, 2 * Math.PI);
					ctx.fill();
					arcArr[i][0] = arcArr[i][0] + arcArr[i][3];
					arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
					arcArr[i][2]=arcArr[i][2]-Math.random()*0.1;
					arcArr[i][4] = arcArr[i][4] + 0.5;
					if(arcArr[i][2]<Math.random()*3){
						arcArr.splice(i,1);
					}
					if(arcArr[i][1] > 650 - arcArr[i][2]) {
						arcArr[i][4] = -arcArr[i][4];
						arcArr[i][4] = arcArr[i][4] * 0.3;
						arcArr[i][1] = 650 - arcArr[i][2];
					}
//					if(arcArr[i][0] > 1300 - arcArr[i][2]) {
//						arcArr[i][3] = -arcArr[i][3];
//						arcArr[i][0] = 1300 - arcArr[i][2];
//					}
//									if(arcArr[i][0] < arcArr[i][2]) {
//										arcArr[i][3] = -arcArr[i][3];
//										arcArr[i][0] = arcArr[i][2];
//									}
//
				}

			}, 16);
		</script>
	</body>

</html>